<template>
	<Layout>
    <Header class="header">
					博客管理平台
		</Header>
    <Layout class="content">
      <Sider hide-trigger class="side">
				<sideMain></sideMain>
			</Sider>
      <Content class="content-info">
				<p>发表文章</p>
				<div>
					<select id="sel" @click="changeType()">
						<option value="div+css">div+css</option>
						<option value="javascript">javascript</option>
						<option value="jquery">jquery</option>
						<option value="html5+css3">html5+css3</option>
						<option value="Vue">Vue</option>
						<option value="Koa">Koa</option>
						<option value="mongodb">mongodb</option>
					</select>
					<input type="text" v-model="title" placeholder="请输入标题">
					<div id="editorElem" style="text-align:left"></div>
					<Button type="primary" class="btn" @click="post()">发表文章</Button>
				</div>
			</Content>
    </Layout>
  </Layout>
</template>

<script>
import SideMain from '~/components/Side'
import Category from '~/components/Category'
import	E from 'wangeditor'
import axios from 'axios'
export default {
	data(){
		return {
			editorContent:'',
			categories:'',
			title:'',
			time:''
		}
	},
	components:{
		SideMain,
		Category
	},
	methods:{
		changeType(){
			var sel = document.getElementById("sel")
			this.categories = sel.options[sel.selectedIndex].value
			console.log(	this.categories )
		},
		post(){
			this.time = new Date()
			axios.post('/admin/fabwz',{
				title:this.title,
				editorContent:this.editorContent,
				categories:this.categories,
				time:this.time
			}).then(response=>{
				console.log(response)
				if(response.data.code==200){
					console.log('发表成功')
					this.$router.push({name:'admin-home'})
				}else{
					console.log(response.data.message)
				}
				console.log(response.data.code)
			}).catch(error=>console.log('发表失败'))
		}
	},
	 mounted() {
    var editor = new E('#editorElem')
  	editor.customConfig.onchange = (html) => {
    	this.editorContent = html
    }
    editor.customConfig.uploadImgShowBase64 = true
    editor.create()
	}
}
</script>

<style lang="stylus" scoped>
.header
	font-size 18px
	color #fff
	background-color #20a0ff
.content
	height 600px
	.side
		background-color #ececec
		color #657180
	.content-info
		p
			padding 10px
			font-size 14px
		div
			select
				padding 8px
				margin-left 10px
				margin-bottom 10px
				border 1px solid #cccccc
				border-radius 4px
			input
				padding 7px
				width 200px
				border 1px solid #cccccc
				border-radius 4px
				vertical-align top
			.btn
				float right
				margin 10px 10px 0 0
</style>

